<template>
  <el-dialog
    title="文件上传"
    :visible.sync="dialogVisible"
    width="780px"
    class="up-dialog-wrap"
    :before-close="handleClose">
    <div>
        <div>
          <el-button type="primary" @click="$refs.inputFiles.click()">
             添加文件
          </el-button>
          <input v-if="multiple" type="file"  ref="inputFiles"  multiple="multiple" style="display: none;"  @change="_filesChange">
          <input v-else type="file"  ref="inputFiles"  style="display: none;"  @change="_filesChange">
        </div>
        <div class="table-list-wrap">
           <table border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed;">
              <thead>
                <tr>
                  <th width="6%">序号</th>
                  <th width="40%">进度</th>
                  <th width="20%">名称</th>
                  <th>大小</th>
                  <th width="20%">操作</th>
                </tr>
              </thead>
              <tr v-for="(item,index) in files" :key="item.timestamp">
                 <td>{{index +1}}</td>
                 <td><el-progress :text-inside="true" :stroke-width="18" :percentage="item.percent" :status="item.success ? 'success': ''"></el-progress></td>
                 <td>{{item.file.name.length > 8 ? (item.file.name.slice(0,8) + '...' ) : item.file.name }}</td>
                 <td>{{(item.file.size/1000/1000).toFixed(2)+'M'}}</td>
                 <td>
                   <el-button type="danger" size="small" @click="remove(index)" >
                      移除
                   </el-button>
                   <el-button type="success" size="small" disabled v-if="item.success">
                      完成
                   </el-button>
                   <el-button type="primary" size="small" @click="upload(item)" v-else>
                      上传
                   </el-button>
                 </td>
              </tr>
           </table>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    export default {
        name: "uploadfiles",
        props: {
          multiple: {
            type: Boolean,
            default: true
          },
        },
        data() {
          return {
            dialogVisible: false,
            files:[]
          }
        },
        methods: {
          handleClose() {
            let success = this.files.every(item =>{
              if(item.success){
                return true;
              }else{
                return false;
              }
            });
            if(!success){
              this.$message({
                message: '还没有上传完毕哦！请稍等',
                type: 'warning'
              });
              return false
            }else{
              this.dialogVisible = false;
            }
            return success;
          },
          ok(){
            if(this.handleClose()){
              let files = [];
              this.files.forEach(function(item){
                 if(item.success){
                   files.push(item)
                 }
              });
              this.$emit('ok',files);
              this.files = [];
            }
          },
          show(){
            this.dialogVisible = true;
          },
          hide(){
            this.dialogVisible = false;
          },
          _filesChange(e){
            let fs = this.$refs.inputFiles.files;
            for (let i = 0; i < (fs && fs.length) || 0 ; i++) {
              let file = fs[i];
              let item = {};
              item.percent = 0;
              item.success = false;
              item.file = file;
              // 不让连续点击
              item.click = false;
              item.timestamp = new Date().getTime()+Math.random()*10000;
              if(this.multiple){
                this.files.push(item);
              }else{
                this.files = [item]
              }
            }
            this.$refs.inputFiles.value = '';
            console.log(this.$refs.inputFiles.value);
          },
          remove(index){

            this.files.splice(index,1);
          },
          upload(item){
            // 如果文件大小大雨1025M
            if(item.file.size/1000/1000 > 1000){
              this.$message({
                message: '文件过大超过1024M,无法上传',
                type: 'warning'
              });
              return;
            }

            if(item.click){
              this.$message({
                message: '正在上传',
                type: 'warning'
              });
              return;
            }
            item.click = true;
            let formData = new FormData();
            formData.append("file", item.file);
            this.api({
              url: "/file/uploadFile",
              method: "post",
              headers: { 'Content-Type': 'multipart/form-data' },
              onUploadProgress: function (e) {
                if (e.lengthComputable) {
                  let rate = e.loaded / e.total;  //已上传的比例
                  if (rate < 1) {
                    item.percent = (rate *100).toFixed(0)*1 + '';
                  }
                }
              },
              data:formData
            }).then(data => {
              item.percent = '100';
              item.success = true;
              item.data = data;
            }).catch((error) => {
                this.$message({
                  message: '上传失败',
                  type: 'warning'
                });
                item.percent = '0';
                item.click = false;
                item.success = false;
            });
          }
        },
    }
</script>

<style lang="scss" scoped>
    $colorBd:red;
    .table-list-wrap{
       padding-top: 10px;
       table{
         width: 100%;
         thead{
           th{
             padding: 10px 5px;
             text-align: center;
             color: #333;
             background-color: #efefef;
           }
         }
         td{
           padding: 10px 5px;
           text-align: center;
         }
       }
    }
</style>
<style lang="scss">
   .up-dialog-wrap{
      .el-dialog__body{
        padding-top: 10px;
      }
   }
</style>
